// =================== 获取文章类别数据 ====================
let layer = layui.layer
let form = layui.form

getArticleCate()
function getArticleCate() {
    axios.get('/my/article/cates').then(({ data: { data } }) => {
        // 来遍历data数组，生成tr td结构
        let htmlStr = data
            .map(
                (item) => `
            <tr>
                <td>${item.name}</td>
                <td>${item.alias}</td>
                <td>
                <button type="button" class="layui-btn layui-btn-xs btn_edit" data-id="${item.Id}">编辑</button>
                <button type="button" class="layui-btn layui-btn-xs layui-btn-danger btn_delete"  data-id="${item.Id}">删除</button>
                </td>
            </tr>
        `
            )
            .join('')

        // 别忘记 tbody 的id添加
        $('#tbody').html(htmlStr)
    })
}

// =================== 添加类别功能 ===================

// ! 别忘记把form的display为none给去掉
const addFromStr = `
    <form id="addForm" class="layui-form">
        <!-- 第一行 分类名称 -->
        <div class="layui-form-item">
          <label class="layui-form-label">分类名称</label>
          <div class="layui-input-block">
            <input type="text" name="name" required lay-verify="required" placeholder="请输入标题" autocomplete="off"
              class="layui-input">
          </div>
        </div>
        <!-- 第二行 分类别名  -->
        <div class="layui-form-item">
          <label class="layui-form-label">分类别名</label>
          <div class="layui-input-block">
            <input type="text" name="alias" required lay-verify="required" placeholder="请输入标题" autocomplete="off"
              class="layui-input">
          </div>
        </div>
        <!-- 第三行 按钮 -->
        <div class="layui-form-item">
          <div class="layui-input-block">
            <button class="layui-btn" lay-submit lay-filter="formDemo">确认添加</button>
            <button type="reset" class="layui-btn layui-btn-primary">重置</button>
          </div>
        </div>
    </form>
`
let indexAddForm

$('#btnAddCate').click(function () {
    indexAddForm = layer.open({
        content: addFromStr,
        type: 1, // 页面层
        title: '添加文章类别',
        area: ['500px', '260px'],
    })
})

// 提交 ==> 触发表单的submit事件，由于表单是动态创建的，所以注册事件一定要使用事件委托（编辑，删除功能都类似）
$('body').on('submit', '#addForm', function (e) {
    e.preventDefault()

    // 收集表单数据 ==> 提交
    let data = $(this).serialize()

    axios
        .post('/my/article/addcates', data)
        .then(({ data: { status, message } }) => {
            if (status !== 0) {
                return layer.msg(message)
            }

            // 新增成功之后，还要做的事情
            // 1. 关闭弹出层
            layer.close(indexAddForm)

            // 2. 重新获取所有的分类渲染展示到页面中
            getArticleCate()

            layer.msg('新增文章类别成功')
        })
})

// ============================ 编辑功能(修改) ============================
let indexEditForm

let editFormStr = `
  <form id="editForm" class="layui-form" lay-filter="editForm">
        <!-- 存id -->
        <div class="layui-form-item layui-hide">
          <label class="layui-form-label">分类名称Id</label>
          <div class="layui-input-block">
            <input type="text" name="Id" required lay-verify="required" placeholder="请输入Id" autocomplete="off"
              class="layui-input">
          </div>
        </div>

        <!-- 第一行 分类名称 -->
        <div class="layui-form-item">
          <label class="layui-form-label">分类名称</label>
          <div class="layui-input-block">
            <input type="text" name="name" required lay-verify="required" placeholder="请输入标题" autocomplete="off"
              class="layui-input">
          </div>
        </div>
        <!-- 第二行 分类别名  -->
        <div class="layui-form-item">
          <label class="layui-form-label">分类别名</label>
          <div class="layui-input-block">
            <input type="text" name="alias" required lay-verify="required" placeholder="请输入标题" autocomplete="off"
              class="layui-input">
          </div>
        </div>
        <!-- 第三行 按钮 -->
        <div class="layui-form-item">
          <div class="layui-input-block">
            <button class="layui-btn" lay-submit lay-filter="formDemo">确认修改</button>
          </div>
        </div>
      </form>
`

// 编辑按钮是动态创建的，需要注册事件委托
$('#tbody').on('click', '.btn_edit', function () {
    // 获取到数据，填充到修改的表单中
    //  接口中需要携带id ==> 给按钮添加自定义属性
    const Id = $(this).attr('data-id')
    // console.log(Id)

    // 发送请求
    // :id 整个替换成具体的id值
    axios.get('/my/article/cates/' + Id).then(({ data: res }) => {
        console.log(res)

        // 填充表单数据
        // formTest 即 class="layui-form" 所在元素属性 lay-filter="" 对应的值
        form.val('editForm', res.data)
    })

    // 编辑弹出框
    indexEditForm = layer.open({
        content: editFormStr, // 内容
        type: 1, // 页面层
        title: '修改文章类别', // 标题
        area: ['500px', '250px'], // 定宽高
    })
})

// 更新功能
$('body').on('submit', '#editForm', function (e) {
    e.preventDefault()

    let data = $(this).serialize()
    console.log(data)

    // 发ajax
    axios.post('/my/article/updatecate', data).then((res) => {
        console.log(res)

        if (res.data.status !== 0) {
            return layer.msg(res.data.message)
        }

        // 更新分类信息成功！做的事情
        // 1. 关闭编辑弹出层
        layer.close(indexEditForm)

        // 2. 重新ajax获取数据
        getArticleCate()

        // 3. 提示
        layer.msg('更新分类信息成功！')
    })
})

// 删除
$('#tbody').on('click', '.btn_delete', function () {
    let id = $(this).attr('data-id')

    axios
        .get('/my/article/deletecate/' + id)
        .then(({ data: { status, message } }) => {
            if (status !== 0) {
                return layer.msg(message)
            }

            // 成功
            // 提示
            layer.msg(message)

            // ajax获取数据渲染
            getArticleCate()
        })
})
